<template>
  <div id="app-container">
    <!-- 条件查询分页表单 -->
    <el-form :inline="true" class="demo-form-inline" style="margin-top:20px;margin-left:20px">
      <el-form-item>
        <el-input v-model="seachObj.name" placeholder="讲师姓名"/>
      </el-form-item>
      <el-form-item>
        <el-select v-model="seachObj.level" clearable placeholder="讲师头衔">
          <el-option label="首席讲师" value="1"/>
          <el-option label="高级讲师" value="2"/>
        </el-select>
      </el-form-item>
      <el-form-item label="添加时间">
        <el-date-picker v-model="seachObj.joinDateBegin" type="date" placeholder="开始日期"/>
        --
        <el-date-picker v-model="seachObj.joinDateEnd" type="date" placeholder="截止日期"/>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="getTeacherPage">查询</el-button>
      <el-button type="danger" icon="el-icon-delete" @click="clearData">清空</el-button>
    </el-form>
    <el-table :data="items" stripe style="width: 100%">
      <el-table-column label="#" width="50">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="70"/>
      <el-table-column prop="avatar" label="头像" width="80">
        <template slot-scope="scope">
          <img v-if="scope.row.avatar" :src="scope.row.avatar" style="width: 50px; height: 50px">
          <img v-else src="https://sh0621-guli-file1.oss-cn-shanghai.aliyuncs.com/avatar/2020/10/20/2043d639b9c2a1209035a1be6f676e93.png" style="width: 50px; height: 50px">
        </template>
      </el-table-column>
      <el-table-column prop="level" label="讲师头衔" width="90">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.level == 1" type="success">首席讲师</el-tag>
          <el-tag v-else type="warning">高级讲师</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="intro" label="讲师简介"/>
      <el-table-column prop="sort" label="排序" width="60"/>
      <el-table-column prop="joinDate" label="入驻时间" width="160"/>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleEdit(scope.row.id)">编辑</el-button>
          <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="page"
      :total="total"
      :page-size="limit"
      :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
      style="padding: 30px 0; text-align: center;"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"/>
  </div>
</template>

<script>
// 引入需要使用的js组件
import teacherApi from '@/api/teacher'
export default {
  // 编写vue语法的内容
  // 发送axios请求获取讲师列表，显示到页面中
  data() {
    return {
      items: [], // 用来接收讲师列表的数据
      // 分页查询条件的默认属性值
      page: 1,
      limit: 5,
      seachObj: {},
      total: 0
    }
  },
  // created：页面一加载立即渲染数据到页面
  created() {
    // this.getTeacherList() // 使用分页就不用查全部了
    this.getTeacherPage()
  },
  // 讲师模块所有的请求都需要访问http://localhost:8110 服务器的接口，将所有的CRUD方法封装到 @/api/teacher.js中
  methods: {
    // 查询所有讲师数据
    // getTeacherList() {
    //   teacherApi.teacherList()
    //     .then(response => {
    //       /**
    //        * avatar: ""
    //        * career: "具备深厚的数学思维功底、丰富的小学教育经验，授课风格生动活泼，擅长用形象生动的比喻帮助理解、简单易懂的语言讲解难题，深受学生喜欢"
    //        * deleted: false
    //        * gmtCreate: "2018-03-30 17:15:57"
    //        * gmtModified: "2019-04-28 05:02:18"
    //        * id: "1"
    //        * intro: "毕业于师范大学数学系，热爱教育事业，执教数学思维6年有余"
    //        * joinDate: "2019-10-29"
    //        * level: 2
    //        * name: "刘德华"
    //        * sort: 10
    //        */
    //       // console.log(response.data.items)
    //       this.items = response.data.items
    //     })
    // },
    // 分页查询
    getTeacherPage() {
      teacherApi.teacherPage(this.page, this.limit, this.seachObj)
        .then(response => {
          // console.log(response)
          this.items = response.data.pageModel.records
          // total：总记录条数，size：当前页查询几条数据，pages：总页码
          this.total = response.data.pageModel.total
        })
    },
    // 更新每页显示记录条数
    handleSizeChange(limit) {
      this.limit = limit
      // 数据改变时重新加载分页数据
      this.getTeacherPage()
    },
    // 更新页码
    handleCurrentChange(page) {
      this.page = page
      // 数据改变时重新加载分页数据
      this.getTeacherPage()
    },
    // 测试获取查询对象
    test() {
      console.log(this.seachObj)
    },
    // 清空查询对象并重新显示分页数据
    clearData() {
      this.seachObj = {}
      this.getTeacherPage()
    },
    // 根据id更新指定讲师信息
    handleEdit(id) {
      // alert(id)
      // 将id携带到编辑表单页面 路由地址：path: 'edit/:id'
      this.$router.push(`/teacher/edit/${id}`) // 跳转到teacherEdit组件中时，vue代码中可以以id为key获取id值
    },
    // 根据id删除指定讲师信息
    handleDelete(teacher) {
      // alert(id)
      // teacherApi.teacherRemove(id)
      this.$confirm(`此操作将永久删除《${teacher.name}》讲师, 是否继续?`, '删除讲师提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning' })
        .then(() => { // 点击确认按钮的处理代码
          // 返回teacherRemove处理结果
          return teacherApi.teacherRemove(teacher.id)
        })
        .then(response => { // 处理teacherRemove的响应结果
          // 删除成功提示
          this.$message.success({
            message: `《${teacher.name}》讲师删除成功`,
            type: 'success'
          })
          // 刷新当前页面
          this.getTeacherPage()
        })
        .catch(() => { // 点击取消按钮的处理代码
          this.$message({
            type: 'info',
            message: '已取消删除' })
        })
    }
  }
}
</script>
